<template>
<div class="wp">
    <div class="Mmain">
        <table class="Mboder">
            <tr class="Mcontent">
                <th>收货人</th>
                <th>所在区域</th>
                <th>街道地址</th>
                <th>联系电话</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in address" :key="index">
                <td>{{item.name}}</td>
                <td>
                    <template v-for="(it,i) in item.ad">
                        <span :key="i" v-if="i<3">{{it}}</span>
                    </template>
                </td>
                <td>
                    <template v-for="(it,i) in item.ad">
                        <span :key="i" v-if="i==3">{{it}}</span>
                    </template>
                </td>
                <td>{{item.phone}}</td>
                <td>家里的地址</td>
                <td>
                    <a v-if="flage[index]" class="xiugai" id="orang" href="###" @click="setad(index)">设为默认地址</a>
                    <a class="xiugai" href="###">修改</a>
                    <a href="###">删除</a>
                </td>
            </tr>
        </table>
    </div>  
 </div>
</template>

<script>
import axios from 'axios';

export default {
    name:'Management',
    data(){
        return{
            address:[],
            flage:[]
        }
    },
    methods:{
        setad(v){
             for(var j = 0;j<this.address.length;j++){
                this.$set(this.flage,j,true);
            }
            var obj = {
                id:this.address[v].addId
            };
            axios({
                method:'post',
                url:'/api/small/user/verify/v1/setDefaultReceiveAddress',
                params:obj,
                headers:{
                    userId:this.$store.state.obj[0].userId,
                    sessionId:this.$store.state.obj[0].sessionId,
                }
            }).then(res=>{
                // console.log(res.data);
                if(res.data.message=='设置成功'){
                    this.$set(this.flage,v,false);
                }
            })
        }
    },
    mounted() {
        axios({
                method:'get',
                url:'/api/small/user/verify/v1/receiveAddressList',
                headers:{
                    userId:this.$store.state.obj[0].userId,
                    sessionId:this.$store.state.obj[0].sessionId,
                }
            }).then(res=>{
                var aa=res.data.result;
                for(var i=0;i<aa.length;i++){
                    this.bb=res.data.result[i].address;
                    if (res.data.result[i].whetherDefault == 1) {
                        var defaults = i;
                    }
                    var newbb=this.bb.split(' ');
                    var obj={
                        name:res.data.result[i].realName,
                        ad:newbb,
                        phone:res.data.result[i].phone,
                        addId:res.data.result[i].id,
                    };
                    this.$set(this.address,i,obj);
                    for(var j = 0;j<this.address.length;j++){
                        this.$set(this.flage,j,true);
                        this.$set(this.flage,defaults,false);
                    }
                }
            });
            
    },
}
</script>

<style  scoped>
.wp {
    width: 1083px;
    height: 623px;
}
.Mmain {
    width: 1041px;
    height: 523px;
    overflow: scroll;
    margin: 20px auto 0;
}
::-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
.Mboder {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    font-size: 14px;
    width: 1041px;
}
.Mboder tr {
    height: 44px;
}
.Mboder td {
    color: #666;;
}
.Mcontent {
    background: #f2f2f2;
    font-size: 15.46px;
}
a {
    color: #4b943d;
}
.xiugai {
    padding-right: 5px;
    border-right: 1px solid #999999;
    margin-right: 6px;
}
#orang {
    color: #f18c26;
}
</style>